<template>
	<view class="login">

		<image class="img" src="../../static/image/bj.png"></image>
		<view class="login_box">
			<view class="login_main">

				<view class="login_main_zhong">
					<view class="login_main_top">
						<image class="img" src="../../static/img/daojia2.png" />
					</view>
					<view class="form">
						<view class="form_input1">
							<input class="uni-input" v-model="tel" placeholder="请输入手机号" />
						</view>
						<view class="form_input2">
							<input class="uni-input" v-model="yzm" placeholder="请输入验证码" />
							<text class="text" @click="sendCodeBtn">{{send?'发送验证码':second+'s重新发送'}}</text>
						</view>

					</view>
					<view class="login_main_zhong_checkbox">

						<u-checkbox-group>
							<u-checkbox size="16px" @change="changecheckbox" v-model="checked" shape="circle"
								activeColor="#00DF25"></u-checkbox>
						</u-checkbox-group>
						<view class="login_main_zhong_biaoti">
							<text class="biaoti_text1">我同意按而乐的</text>
							<text class="biaoti_text2" @click="users">《用户协议》</text>
						</view>

					</view>
					<view class="login_main_bottom" >
						<button class="btn" @click="login">登录</button>
						<!-- <button class="btn" @click="wxlogin" style="margin-top: 25rpx;">微信一键登录</button> -->
					</view>
					<view class="login_bot">
						<image src="../../static/imgs/wx.png" mode="" class="wximg" @click="wxlogin"></image>
						<view>微信授权登录</view>
					</view>
				</view>


			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import homeServices from '../../service/homeService'
	export default {
		data() {
			return {
				send: true,
				second: 0,
				s: 60, //默认倒计时
				tel: '',
				yzm: '',
				checked: false,
				longitude:'',
				latitude:'',
				code:''
			}
		},
		computed: {
			...mapState(['usernamne'])

		},

		methods: {
			...mapActions(['login', 'logout']),
			tiaozhuang() {
				uni.switchTab({
					url: '../text/text'
				})
			},

			changecheckbox(e) {
				console.log(e)
				let arr = e
				if (arr == true) {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			// 发送验证码
			async sendCodeBtn() {
				// 防止多次重复点击
				if (!this.send) {
					return false;
				}
				if (!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.tel))) {
					uni.showToast({
						title: '请输入正确的手机格式',
						icon: 'none'
					});
					return false;
				}

				let params = {
					'type': 'login',
					phone: this.tel
				}
				let res = await homeServices.servicesList(params)
				console.log(res);
				let arr = res.msg
				this.send = false;

				uni.showToast({
					title: arr,
					icon: 'none',
					duration: 5000,
					success: () => {
						this.time(); // 倒计时
					}
				})


			},
			// 倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(function() {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval);
					} else {
						// console.log(that.second)
						that.second--;
					}
				}, 1000)

			},
			login() {
				if (this.checked !== true) {
					uni.showToast({
						title: '请选择用户协议和意见反馈!',
						icon: 'none'
					});
					return
				}
				if (this.yzm == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return
				}
				// this.gologin()
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						this.longitude = res.longitude
						this.latitude = res.latitude
						
						this.gologin()
					},
					fail: (err) => {
						console.log(err)
						// uni.showToast({
						// 	title: '获取位置失败',
						// 	icon: 'none'
						// });
						
						this.gologin()
						
						
					},
				})
				

			},
			wxlogin(){
				if (this.checked !== true) {
					uni.showToast({
						title: '请选择用户协议和意见反馈!',
						icon: 'none'
					});
					return
				}
				
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						this.longitude = res.longitude
						this.latitude = res.latitude
						uni.login({
							provider: 'weixin',
							onlyAuthorize:true,
							success: loginRes => {
								this.code = loginRes.code
								console.log(this.code);
								this.gowxlogin()
							}
						});
					},
					fail: (err) => {
						console.log(err)
						// uni.showToast({
						// 	title: '获取位置失败',
						// 	icon: 'none'
						// });
						
						uni.login({
							provider: 'weixin',
							onlyAuthorize:true,
							success: loginRes => {
								this.code = loginRes.code
								console.log(this.code);
								this.gowxlogin()
							}
						});
						
						
					},
				})
			},
			async gowxlogin(){
				console.log(this.code);
				let params = {
					code: this.code,
					longitude: this.longitude,
					latitude: this.latitude
				}
				let a = JSON.stringify(params)
				let res = await homeServices.wxLogin(a)
				console.log(res);
				if (res.status == 200) {
					console.log(res);
					uni.setStorageSync('token', res.data.token)
					uni.reLaunch({
						//成功后跳转到小程序首页，由于没得界面，我就屏蔽了。
						url: "/pages/index/index",
					});
				} else {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
				
			},
			async gologin(){
				let params = {
					account: this.tel,
					captcha: this.yzm,
					longitude: this.longitude,
					latitude: this.latitude
				}
				let res = await homeServices.login(params)
				if (res.status == 200) {
					uni.setStorageSync('token', res.data.token)
					uni.reLaunch({
						//成功后跳转到小程序首页，由于没得界面，我就屏蔽了。
						url: "/pages/index/index",
					});
				} else {
				
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			users() {
				console.log('@@@');
				uni.navigateTo({
					url: '/pagesB/agreement/agreement'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/sass/login.scss"
</style>
